<template>
  <div class="page-tool" v-if="!loading">
    <div class="page-tool-item" @click="lastPage">上一页</div>
    <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
    <div class="page-tool-item" @click="nextPage">下一页</div>
  </div>
 
  <div class="pdf-wrap" v-loading="loading">
    <VuePdfEmbed :source="source" class="vue-pdf-embed" :page="state.pageNum" :style="scale" @loaded="onPdfLoaded" />
  </div>
</template>
<script setup lang="ts" name='vpPdfEmbed'>
import { ref, reactive, computed, watch } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
 
 
const props = defineProps({
  pdfUrl: {
    type: String,
    required: true
  },
  pageNum: {
    type: Number,
    default: 1,
  }
})
const state = reactive({
  pageNum: 1,// 当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});

const emits = defineEmits(['onPageChange']);
const loading = ref(false);

const scale = computed(() => `transform:scale(${state.scale})`)
function lastPage() {
  if (state.pageNum > 1) {
    state.pageNum -= 1;
    emits('onPageChange', {pageNum: state.pageNum, numPages: state.numPages});
  }
}
function nextPage() {
  if (state.pageNum < state.numPages) {
    state.pageNum += 1;
    emits('onPageChange', {pageNum: state.pageNum, numPages: state.numPages});
  }
}
function pageZoomOut() {
    state.scale += 0.1;
}
function pageZoomIn() {
    state.scale -= 0.1;
}

const source = computed(() => {
  return {
    url: props.pdfUrl,// 预览pdf文件地址
    cMapUrl: '/pdfjs/web/cmaps/',
    cMapPacked: true,
  }
})
 
const onPdfLoaded = (pdf: any) => {
  loading.value = false;
  state.pageNum = props.pageNum || 1;
  state.numPages = pdf.numPages;
  if (state.pageNum && state.pageNum > pdf.numPages) {
    state.pageNum = pdf.numPages;
  }
};

watch(() => props.pdfUrl, () => {
  loading.value = true;
  state.pageNum = 1;
},{immediate: true})

const getPage = () => {
  return {
    currentPage: state.pageNum,
    totalPage: state.numPages
  }
}

const setPage = (pageNum: number) => {
  state.pageNum = pageNum;
}

defineExpose({
    getPage,
    setPage,
})
 
</script>
<style lang="scss" scoped>

.pdf-preview {
  position: relative;
  height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  background: rgb(66, 66, 66);
}
 
.vue-pdf-embed {
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  transform-origin: top center; /* Set transform origin */
}
 
.pdf-preview {
  position: relative;
  height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: #e9e9e9;
}
 
.vue-pdf-embed {
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  transform-origin: top center;
  width: 100%;
  height: 100%;
  max-height: 100vh; 
}
 
.page-tool {
  position: fixed; /* Fix the position of the toolbar */
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: rgb(66, 66, 66);
  color: white;
  border-radius: 19px;
  z-index: 100;
  cursor: pointer;
}
 
.page-tool-item {
  padding: 8px 10px;
  cursor: pointer;
  width: 70px;
  text-align: center;
  &:hover{
    background-color: grey;
    border-radius: 19px;
  }
}
</style>